<template>
  <div class="search-view">
    <OpSearch
        show-action
        v-model="searchValue"
        shape="round"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="emits('cancel')"
    ></OpSearch>
<!-- 搜索发现   -->
    <div v-if="!searchValue" class="search-view__history">
      <div class="label">搜索发现</div>
      <TransitionGroup name="list">
        <div class="history-tag" v-for="v in historyTags" :key="v" >
          {{ v }}
        </div>
        <div class="history-tag" key="arrow" @click="toggleHistoryTag">
          <VanIcon v-if="isHistoryTagShown" name="arrow-up"></VanIcon>
          <VanIcon v-else name="arrow-down"></VanIcon>
        </div>
      </TransitionGroup>
    </div>
  </div>
</template>

<script setup lang="ts">
  import OpSearch from "@/components/OpSearch.vue";
  import {computed, ref} from "vue";
  import {useToggle} from "@/use/useToggle.ts";

  interface IEmits{
    (e:'cancel'):void
  }
  const emits=defineEmits<IEmits>()

  const searchValue=ref('');
  const onSearch=(v?:string|number)=>{
    console.log("search")
  }

  const HISTORY_TAGS = [
    '冰美式',
    '减脂轻食',
    '螺蛳粉',
    '夜宵烧烤',
    '日式便当',
    '酸奶碗',
    '川湘菜系',
    '呈贡大学城水果捞',
    '高温补贴冰饮5折',
    '财神到红包节',
  ]
  const [isHistoryTagShown, toggleHistoryTag] = useToggle(false)
  const historyTags = computed(() =>
      isHistoryTagShown.value ? HISTORY_TAGS : HISTORY_TAGS.slice(0, 5)
  )

</script>

<style scoped lang="scss">
.search-view {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 999;
  &__history {
    padding: var(--van-padding-sm);
    .label {
      margin-bottom: var(--van-padding-xs);
    }
    .history-tag {
      display: inline-block;
      font-size: 12px;
      border-radius: 10px;
      color: var(--van-gray-6);
      background: var(--van-gray-1);
      padding: 4px 8px;
      margin-right: 10px;
      margin-bottom: var(--van-padding-xs);
    }
  }
}
</style>